<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width:500px;
            margin:0 auto;
        }
    </style>
</head>
<body>
    <div>
        <input type="text" placeholder="请输入查询产品的名称" id="pname"/>
        <button id="psearch">搜索</button>
        <table>
            <thead>
                <tr>
                    <th>编号</th>
                    <th>产品名称</th>
                    <th>产品价格</th>
                </tr>
            </thead>
            <tbody id="pbody">
                
            </tbody>
        </table>
    </div>
    <div>
        <input type="text" placeholder="请输入姓名" id="username"/>
        <button id="usersearch">搜索</button>
        <table>
            <thead>
                <tr>
                    <th>编号</th>
                    <th>姓名</th>
                    <th>性別</th>
                </tr>
            </thead>
            <tbody id="usertabody">
                
            </tbody>
        </table>
    </div>

    <script>
        var data=[
            {id:1,name:"华为",price:3500},
            {id:2,name:"荣耀",price:6500},
            {id:3,name:"小米",price:5500},
            {id:4,name:"红米",price:4500},
            {id:5,name:"oppo",price:3500},
            {id:6,name:"Iphone",price:4000},
            {id:7,name:"苹果",price:5000}
        ];

        var userData=[
            {id:1,name:"Trump",price:70},
            {id:2,name:"Biden",price:65},
            {id:3,name:"xiaowu",price:50},
            {id:4,name:"小王",price:45},
            {id:5,name:"大王",price:60},
            {id:6,name:"悟空",price:30},
            {id:7,name:"八戒",price:35}
        ];
        
        // var tbody=document.querySelector("tbody")

        function SearchTable() //初始化
        {
            this.data=[]
            this.tbody=null
            this.button=null
            this.input=null
        }
        SearchTable.prototype.init=function()
        {
           var o=this; //这里的this指向SearchTable
            this.renderData(this.data)
            this.button.onclick=function()
            {
                o.search()
            }
            this.input.addEventListener('keyup',function(){
                o.search()
            })
            
        }

        SearchTable.prototype.search=function()
        {
            
            var pname=this.input.value;
            var result=this.data.filter(function(value){  //查找有关于input。value的数据项
                if(value.name.indexOf(pname)>=0)
                {
                    return true;
                }
                return false
            })
            this.tbody.innerHTML='' //在原来的tbody里面的html先清空
            this.renderData(result)  //把筛选的结果重新写入tbody
            
        }

        SearchTable.prototype.renderData=function(data)
        {
            var o=this;  //给searchTable的this对象做一个别名
            data.forEach(function(value){
                var tr=document.createElement('tr')
                var td1=document.createElement("td")
                    td1.innerText=value.id
                    tr.appendChild(td1)
                var td2=document.createElement("td")
                    td2.innerText=value.name
                    tr.appendChild(td2)
                var td3=document.createElement("td")
                    td3.innerText=value.price
                    tr.appendChild(td3)
                o.tbody.appendChild(tr)
            })

        }

        var st=new SearchTable()  //实例化对象
            st.data=data
            st.tbody=document.querySelector("#pbody")
            st.button=document.querySelector("#psearch")
            st.input=document.querySelector('#pname')
            st.init()
        var usert=new SearchTable();
            usert.data=userData;//对象的数据属性data 赋值.
            usert.tbody=document.querySelector('#usertabody');//给对象tbody赋值 填充表格主体
            usert.button=document.querySelector('#usersearch');
            usert.input=document.querySelector('#username');
            usert.init();//调用对象init 初始化

    </script>
    
</body>
</html>